<!-- views/main/SkuPage.vue -->
<template>
    <div>
        <!-- 添加按钮 -->
        <el-button type="primary" @click="showAddDialog()">添加</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="skuID"  />
            <el-table-column prop="name" label="sku名称" />
            <el-table-column prop="num" label="sku数量" />
            <el-table-column prop="price" label="sku价格" />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="showEditDialog(scope.row)">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </template>
            </el-table-column> 
        </el-table>
    </div>
    <!-- 添加对话框组件 -->
    <SkuSialog ref="skuDialogRef" />
    <!-- 修改对话框组件 -->
    <ModifySkuDialog ref="modifySkuDialogRef" />
</template>

<script setup>
import { ref } from 'vue';
import SkuSialog from '../../components/SkuDialog.vue';
import ModifySkuDialog from '../../components/ModifySkuDialog.vue';

const skuDialogRef = ref();
const modifySkuDialogRef = ref();

const tableData = [
    {
        id: '229',
        name: '薯片32包',
        num: '10000',
        price:"53"
    },
    {
        id: '228',
        name: '薯片20包',
        num: '10000',
        price:"53"
    },
    {
        id: '227',
        name: '薯片12包',
        num: '10000',
        price:"53"
    }
]

// 控制添加弹窗显示
const showAddDialog = () => {
  if (skuDialogRef.value) {
    skuDialogRef.value.showFormDialog();
  }
};

// 控制修改弹窗显示
const showEditDialog = (row) => {
  if (modifySkuDialogRef.value) {
    modifySkuDialogRef.value.showEditFormDialog(row);
  }
};
</script>
